var dir = 'first-project' //项目目录

var gulp = require('gulp'), // 引入 gulp
  fs = require('fs'), // 引入node中的 fs
  babel = require("gulp-babel"), // 引入 gulp-babel
  pug = require('gulp-pug'), // 引入 gulp-pug
  sass = require('gulp-sass')(require('sass')), // 引入 sass
  replace = require('gulp-replace'),  // 参数替换
  webserver = require('gulp-webserver'),       // 引入 webserver 启动服务
  { nanoid } = require('nanoid')

// 防止缓存的参数
var version = '?v=' + nanoid()
// 构建项目
gulp.task('construct', async function () {
  await fs.access(dir, fs.constants.F_OK, (err) => {
    if (err) {
      return gulp.src('./.template/**/**')
        .pipe(gulp.dest(dir))
    }
  })
})

// 编译pug
function html() {
  return gulp
    .src(dir + '/src/*.pug')
    .pipe(pug({ pretty: true }))
    .pipe(replace(/\?v=/g, version))
    .pipe(replace(/\.png/g, '.png' + version))
    .pipe(replace(/\.jpg/g, '.jpg' + version))
    .pipe(gulp.dest(dir + '/dist/'))
}

// 编译sass
function style() {
  return gulp
    .src(dir + '/src/styles/*.scss')
    .pipe(sass({ pretty: true }))
    .pipe(gulp.dest(dir + '/dist/css'))
}

// 编译js
function script() {
  return gulp.src(dir + '/src/js/*.js')// ES6 源码存放的路径
    .pipe(replace(/\.png/g, '.png' + version))
    .pipe(replace(/\.jpg/g, '.jpg' + version))
    .pipe(babel({ presets: ['es2015'] }))		// 先转es5再压缩
    .pipe(gulp.dest(dir + '/dist/js'))
}


function web() {   // 启动一个任务来打开服务， 和其他压缩文件的任务一样
  return gulp.src(dir + '/dist/')    // 把哪个目录作为服务器根目录
    .pipe(webserver({     // 配置server插件
      host: 'localhost',        // 主机域名
      port: '3000',             // 启动端口
      livereload: true,         // 热重载
      open: '/index.html', // 默认启动目录
      // proxies:[                 // 代理
      //   {
      //     source: '/api/',      // 代理标识符
      //     target: 'http://vue.slmwb.com:3000/slmwb/' // 真实代理地址
      //   }
      // ]
    }))
}
// 监听变化
function watchHandler() {
  gulp.watch(dir + '/src/*.pug', gulp.series(html))
  gulp.watch(dir + '/src/**/*.pug', gulp.series(html))
  gulp.watch(dir + '/src/styles/*.scss', gulp.series(style))
  gulp.watch(dir + '/src/js/*.js', gulp.series(script))

}

exports.default = gulp.series(gulp.parallel(html, style, script), gulp.parallel(web, watchHandler))
